<template>
  <div>
    <h1>Pagination</h1>
    <button
      v-for="page in total"
      :key="page"
      :class="{ active: page === current }"
      @click="changeCurrent(page)"
    >
      {{ page }}
    </button>
    <!-- 
      注意:不要在表单中双向绑定 父组件传递过来的props数据
     -->
    <select :value="limit" @change="changeLimit($event.target.value)">
      <option :value="3">每页3条</option>
      <option :value="5">每页5条</option>
      <option :value="7">每页7条</option>
      <option :value="9">每页9条</option>
    </select>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: ["current", "limit", "total", "changeCurrent", "changeLimit"],
};
</script>

<style scoped>
.active {
  background-color: red;
}
</style>
